<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../elementUI/index.css">
    <script src="../elementUI/index.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!--<script src="../js/alldatas.js"></script>-->
    <script src="../js/axios.min.js"></script>
    <style>
        body {
            background-color: rgb(229, 232, 165);
        }

        #app {
            width: 1000px;
            height: 680px;
            background: url(../img/i.jpg);
            border: solid 2px;
            box-shadow: 5px 5px 10px 1px rgb(0, 0, 0);
            margin: 100px 470px;
            position: absolute;
        }

        h1 {
            display: inline-block;
            position: absolute;
            margin: 100px 250px;
            font-size: 80px;
            color: rgb(0, 0, 0);
        }

        .demo-ruleForm {
            width: 400px;
            margin: 250px 250px;
        }

        #status {
            width: 800px;
            height: 80px;
        }

        #admin {
            margin: 20px 60px;
        }

        #teacher {
            margin: 10px 40px;
        }

        #student {
            margin: 10px 40px;
        }

        #submit {
            margin: 20px 35px;
        }

        #reset {
            margin: 20px 35px;
        }
    </style>
</head>

<body>
<div id="app">
    <h1>学生管理系统</h1>
    <el-form :model="message" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账户" prop="username">
            <el-input placeholder="请输入用户名" type="text" v-model="message.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" type="password" v-model="message.password" show-password></el-input>
        </el-form-item>
        <el-radio-group v-model="message.status" id="status">
            <el-radio label="1" id="admin">管理员</el-radio>
            <el-radio label="2" id="teacher">教师</el-radio>
            <el-radio label="3" id="student">学生</el-radio>
        </el-radio-group>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" id="submit">提交</el-button>
            <el-button @click="resetForm('ruleForm')" id="reset">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var v1 = new Vue({
        el: "#app",
        data: {
            message: {
                username: "",
                password: "",
                status: ""
            }
        },
        methods: {
            submitForm(formName) {
                var _this = this;
                if (this.message.username == "") {
                    this.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    });
                } else if (this.message.password == "") {
                    this.$message({
                        message: '请输入密码',
                        type: 'warning'
                    });
                } else if (this.message.status == "") {
                    this.$message({
                        message: '请选择身份',
                        type: 'warning'
                    });
                }else{
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios({
                                method: 'post',
                                url: '/login',
                                params: this.message,
                                responseType: 'json'
                            }).then(res => {
                                if (res.data.code === 200) {
                                    this.$message.success("登录成功");
                                    setTimeout(() => {
                                        if (_this.message.status == 1) {
                                            window.location.href = "admin.html";
                                        } else if (_this.message.status == 2) {
                                            window.location.href = "teacher.html";
                                        } else {
                                            window.location.href = "student.html";
                                        }
                                    }, 1000);
                               }else {
                                    this.$message.error("账户名或密码错误");
                                }
                            }).catch(err => {
                                console.log(err)
                                this.$message.error('登录失败');
                            })
                        } else {
                            this.message.warning('请输入完整信息');
                        }
                    });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

</html>